<template>
  <header class="top-navbar">
    <div class="search">
      <div class="search-icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8" />
          <line x1="21" y1="21" x2="16.65" y2="16.65" />
        </svg>
      </div>
      <input class="search-input" placeholder="搜索测试服务、用例..." />
    </div>
    <div class="nav-actions">
      <button class="btn btn-primary">+ 创建测试</button>
      <div class="notification-dropdown" @click="toggleNotificationDropdown">
        <div class="bell">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
            <path d="M13.73 21a2 2 0 0 1-3.46 0" />
          </svg>
        </div>
        <div class="notification-badge" v-if="notificationCount > 0">{{ notificationCount }}</div>
        <div class="dropdown-content notification-content" v-if="showNotificationDropdown">
          <div class="dropdown-header">通知</div>
          <div class="notification-item" v-for="(notification, index) in notifications" :key="index">
            <div class="notification-icon" :class="notification.type">
              <svg v-if="notification.type === 'info'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="16" x2="12" y2="12" />
                <line x1="12" y1="8" x2="12.01" y2="8" />
              </svg>
              <svg v-if="notification.type === 'warning'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
                <line x1="12" y1="9" x2="12" y2="13" />
                <line x1="12" y1="17" x2="12.01" y2="17" />
              </svg>
              <svg v-if="notification.type === 'success'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                <polyline points="22 4 12 14.01 9 11.01" />
              </svg>
            </div>
            <div class="notification-details">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
          </div>
          <div class="dropdown-footer">查看全部通知</div>
        </div>
      </div>
      <div class="user-dropdown" @click="toggleUserDropdown">
        <img class="avatar" src="/picture/管理员.png" alt="avatar" />
        <div class="dropdown-content user-content" v-if="showUserDropdown">
          <div class="dropdown-header">用户信息</div>
          <div class="dropdown-item">
            <span class="dropdown-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                <circle cx="12" cy="7" r="4" />
              </svg>
            </span>
            <span>个人资料</span>
          </div>
          <div class="dropdown-item">
            <span class="dropdown-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3" />
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
              </svg>
            </span>
            <span>账户设置</span>
          </div>
          <div class="dropdown-divider"></div>
          <div class="dropdown-item" @click="handleLogout">
            <span class="dropdown-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                <polyline points="16 17 21 12 16 7" />
                <line x1="21" y1="12" x2="9" y2="12" />
              </svg>
            </span>
            <span>退出登录</span>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'

export default {
  name: 'TopNavbar',
  emits: ['logout'],
  setup(props, { emit }) {
    const router = useRouter()
    const userStore = useUserStore()
    
    // 通知数据
    const notificationCount = ref(3)
    const notifications = ref([
      {
        title: '新的测试报告已生成',
        time: '10分钟前',
        type: 'info'
      },
      {
        title: '接口测试失败提醒',
        time: '30分钟前',
        type: 'warning'
      },
      {
        title: 'UI自动化测试全部通过',
        time: '1小时前',
        type: 'success'
      }
    ])

    // 下拉框显示状态
    const showNotificationDropdown = ref(false)
    const showUserDropdown = ref(false)

    // 切换通知下拉框
    const toggleNotificationDropdown = () => {
      showNotificationDropdown.value = !showNotificationDropdown.value
      // 关闭另一个下拉框
      if (showUserDropdown.value) {
        showUserDropdown.value = false
      }
    }

    // 切换用户下拉框
    const toggleUserDropdown = () => {
      showUserDropdown.value = !showUserDropdown.value
      // 关闭另一个下拉框
      if (showNotificationDropdown.value) {
        showNotificationDropdown.value = false
      }
    }

    // 点击外部关闭下拉框
    const handleClickOutside = (event) => {
      const notificationDropdown = event.target.closest('.notification-dropdown')
      const userDropdown = event.target.closest('.user-dropdown')
      
      if (!notificationDropdown && showNotificationDropdown.value) {
        showNotificationDropdown.value = false
      }
      
      if (!userDropdown && showUserDropdown.value) {
        showUserDropdown.value = false
      }
    }

    const handleLogout = () => {
      emit('logout')
    }

    // 生命周期钩子
    onMounted(() => {
      document.addEventListener('click', handleClickOutside)
    })

    onUnmounted(() => {
      document.removeEventListener('click', handleClickOutside)
    })

    return {
      notificationCount,
      notifications,
      showNotificationDropdown,
      showUserDropdown,
      toggleNotificationDropdown,
      toggleUserDropdown,
      handleLogout
    }
  }
}
</script>

<style scoped>
/* 顶部导航栏样式保持与原设计一致 */
.top-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search {
  display: flex;
  align-items: center;
  position: relative;
  width: 320px;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: #9ca3af;
  width: 18px;
  height: 18px;
}

.search-input {
  width: 100%;
  padding: 8px 16px 8px 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  background-color: #f9fafb;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #8b5cf6;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.btn-primary {
  background-color: #8b5cf6;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #7c3aed;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.notification-dropdown,
.user-dropdown {
  position: relative;
  cursor: pointer;
}

.bell {
  color: #6b7280;
  width: 20px;
  height: 20px;
}

.notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #ef4444;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  transition: all 0.2s ease;
}

.avatar:hover {
  border-color: #8b5cf6;
  transform: scale(1.05);
}

.dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 1000;
  min-width: 220px;
}

.notification-content {
  min-width: 300px;
}

.dropdown-header {
  padding: 12px 16px;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  background-color: #f9fafb;
  border-radius: 8px 8px 0 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
}

.notification-item:hover {
  background-color: #f9fafb;
}

.notification-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.notification-icon.info {
  color: #3b82f6;
}

.notification-icon.warning {
  color: #f59e0b;
}

.notification-icon.success {
  color: #10b981;
}

.notification-details {
  flex: 1;
}

.notification-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: #6b7280;
}

.dropdown-footer {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #3b82f6;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-footer:hover {
  background-color: #f9fafb;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #374151;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background-color: #f9fafb;
}

.dropdown-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #6b7280;
}

.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 0;
}
</style>